
<template>
    <div class="threeJsPrc21">
      <div class="myCanvas" ref="myCanvas"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-property-decorator';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 场景
const scene = new THREE.Scene();
const point = new THREE.PointLight(0xffffff);
point.position.set(200, 200, 300);
scene.add(point);
const ambient = new THREE.AmbientLight(0x4444);
scene.add(ambient);
scene.add(new THREE.AxesHelper(250));
// 相机
const camera = new THREE.PerspectiveCamera();
camera.fov = 70;
camera.near = 1;
camera.near = 10000;
camera.position.set(200, 100, 200);
camera.lookAt(scene.position);
// 渲染器
const renderer = new THREE.WebGLRenderer({
  alpha: true,
});
renderer.debug.checkShaderErrors = false;
renderer.setClearColor(0xb9d3ff, 1);

@Options({ components: {
} })
export default class ThreeJsPrc21 extends Vue {
  public rect!: DOMRect;
  public dpr =750 / window.innerWidth;
  public cube!: THREE.BoxGeometry;
  public sphere!: THREE.SphereGeometry;
  public cylinder!: THREE.CylinderGeometry;
  public material!: THREE.MeshLambertMaterial;
  public material1!: THREE.MeshLambertMaterial;
  public material2!: THREE.MeshLambertMaterial;
  public mesh!: THREE.Mesh;
  public mesh1!: THREE.Mesh;
  public mesh2!: THREE.Mesh;
  public t0!: Date;
  public controls!: OrbitControls;


  public draw() {
    renderer.render(scene, camera);
    requestAnimationFrame(() => {
      this.draw();
    });
  }
  public mounted() {
    this.rect = (this.$el as HTMLElement).getBoundingClientRect();
    (this.$refs.myCanvas as HTMLDivElement).append(renderer.domElement);
    renderer.setPixelRatio(this.dpr);
    renderer.setSize(this.rect.width, this.rect.height, false);
    camera.aspect = this.rect.width / this.rect.height;
    renderer.render(scene, camera);
    // // 立方体网格模型
    // this.cube = new THREE.BoxGeometry(50, 50, 50);
    // this.material = new THREE.MeshLambertMaterial({
    //   color: 0x00ff00,
    // });
    // this.mesh = new THREE.Mesh(this.cube, this.material);
    // scene.add(this.mesh);
    // // 球体网格模型
    // this.sphere = new THREE.SphereGeometry(30, 40, 40);
    // this.material1 = new THREE.MeshPhongMaterial({
    //   color: 0xff00ff,
    //   specular: 0x4488ee,
    //   shininess: 15,
    // });
    // this.mesh1 = new THREE.Mesh(this.sphere, this.material1);
    // this.mesh1.translateY(120);
    // scene.add(this.mesh1);
    // // 圆柱网格模型
    // this.cylinder = new THREE.CylinderGeometry(20, 20, 50, 20);
    // this.material2 = new THREE.MeshLambertMaterial({
    //   color: 0xff00ff,
    // });
    // this.mesh2 = new THREE.Mesh(this.cylinder, this.material2);
    // this.mesh2.position.set(80, 0, 0);
    // scene.add(this.mesh2);
    const geometry = new THREE.BufferGeometry();
    const vertices = new Float32Array([
      0, 0, 0,
      50, 0, 0,
      0, 100, 0,
      0, 0, 10,
      0, 0, 100,
      50, 0, 10,
    ]);
    const attribute = new THREE.BufferAttribute(vertices, 3);
    geometry.attributes.position = attribute;
    const material = new THREE.MeshBasicMaterial({
      color: 0x0000ff,
      side: THREE.DoubleSide,
    });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);


    renderer.setAnimationLoop(() => {
      renderer.render(scene, camera);
    });
    this.controls = new OrbitControls(camera, renderer.domElement);
  }
}
</script>

<style lang="postcss" scoped>
.threeJsPrc21{
  touch-action: none;
  width: 100%;
  height: 100%;
  background: grey;
}
</style>
